<template>
    <div class="retire-age-calculator">
        <h2>退休年龄计算器</h2>
        <!-- 出生年月选择 -->
        <div style="display: flex; gap: 30px;">
            <div class="form-item">
                <label >出生年月：</label>
                <el-date-picker v-model="birthDate" type="month" placeholder="选择出生年月" value-format="YYYY-MM" />
            </div>
            <!-- 性别选择 -->
            <div class="form-item">
                <label >性别及人员类型：</label>
                <el-select v-model="gender" placeholder="请选择性别及人员类型" style="width: 250px;">
                    <el-option label="男职工" value="男职工"></el-option>
                    <el-option label="原法定退休年龄50周岁女职工" value="原法定退休年龄50周岁女职工"></el-option>
                </el-select>
            </div>
            <!-- 计算按钮 -->
            <div class="form-item">
                <el-button type="primary" @click="calculateRetirementAge">计算退休年龄</el-button>
            </div>
            
        </div>
        <!-- 结果输出 -->
        <div class="form-item">
                <label for="result">退休时间：</label>
                <span class="result">{{ retirementDate || '计算结果将在此显示' }}</span>
            </div>
            <div class="form-item">
                <label for="age">退休年龄：</label>
                <span class="result">{{ retirementAge || '退休年龄将在此显示' }}</span>
            </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import dayjs from 'dayjs'; // 使用 dayjs 处理日期

const birthDate = ref(''); // 出生年月
const gender = ref(''); // 性别
const retirementDate = ref(''); // 退休时间
const retirementAge = ref(''); // 退休年龄

// 计算退休年龄
const calculateRetirementAge = () => {
    if (!birthDate.value || !gender.value) {
        retirementDate.value = '请先选择出生年月和性别';
        retirementAge.value = '';
        return;
    }

    const birth = dayjs(birthDate.value + '-01'); // 将出生年月转换为 dayjs 对象
    let originRetireDate;
    let delayMonths = 0;

    // 根据性别计算原退休年龄
    if (gender.value === '男职工') {
        originRetireDate = birth.add(60, 'year'); // 男性60岁退休
        if (originRetireDate.year() >= 2025) {
            delayMonths = calculateDelayMonths(birth, '男');
        }
    } else if (gender.value === '原法定退休年龄50周岁女职工') {
        originRetireDate = birth.add(50, 'year'); // 女性50岁退休
        if (originRetireDate.year() >= 2025) {
            delayMonths = calculateDelayMonths(birth, '女');
        }
    }

    // 最终退休日期 = 原退休日期 + 延迟月份
    const finalRetireDate = originRetireDate.add(delayMonths, 'month');
    retirementDate.value = finalRetireDate.format('YYYY-MM');

    // 计算退休年龄
    retirementAge.value = finalRetireDate.diff(birth, 'year');
};

// 计算延迟退休的月份
const calculateDelayMonths = (birthDay, sex) => {
    const startDate = dayjs('2024-12-31');
    let sexNum = 4; // 男性每4个月延迟1个月
    let maxMonth = 36; // 男性最多延迟36个月
    let workTime = 60; // 男性原60岁退休
    if (sex === '女') {
        sexNum = 2; // 女性每2个月延迟1个月
        maxMonth = 60; // 女性最多延迟60个月
        workTime = 50; // 女性原50岁退休
    }
    // 原退休日期
    const originRetireDate = birthDay.add(workTime, 'year');
    // 原退休日期与2024年12月31日的差值（以月为单位）
    const monthDiff = originRetireDate.diff(startDate, 'month');
    // 根据性别计算延迟月份
    let delayMonth = Math.min(Math.floor(monthDiff / sexNum), maxMonth);
    if (monthDiff % sexNum > 0 && delayMonth < maxMonth) {
        delayMonth++;
    }
    return delayMonth;
};
</script>

<style scoped>
.retire-age-calculator {
    margin: 10px 0px 0px 8%;
    padding: 20px;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.form-item {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

label {
    font-size: 16px;
    color: #333;
}

.result {
    font-size: 16px;
    color: #409eff;
    font-weight: bold;
}
</style>